// vue-4.x：
import { createRouter, createWebHistory } from 'vue-router';


// 配置路由规则
const routes = [
    {
        path: "",
        name: "login",
        component: import("../components/02guarder/Login"),
    },
    {
        path: "/welcome",
        name: "welcome",
        component: import("../components/02guarder/Welcome"),
    },
    {
        path: "/inner",
        name: "inner",
        component: import("../components/02guarder/InnerGuarder"),
    },
    {
        path: "/my",
        name: "my",
        component: import("../components/02guarder/My"),
        beforeEnter: (to, from) => {
            console.log("路由独享守卫：to = ", to)
            console.log("路由独享守卫：from = ", from)
            // 如果返回了false，会阻止进入组件
            // return false;
        }
    },
    {
        path: "/helloStore",
        name: "helloStore",
        component: import("../components/03store/HelloStore")
    },
    {
        path: "/helloMutations",
        name: "helloMutations",
        component: import("../components/03store/HelloMutations")
    },
    {
        path: "/helloGetters",
        name: "helloGetters",
        component: import("../components/03store/HelloGetters")
    },
    {
        path: "/helloActions",
        name: "helloActions",
        component: import("../components/03store/HelloActions")
    },
    {
        path: "/helloAxios",
        name: "helloAxios",
        component: import("../components/04axios/HelloAxios")
    },
    {
        path: "/helloVue3",
        name: "helloVue3",
        component: import("../components/05vue3/HelloVue3")
    },
    {
        path: "/helloSwiper",
        name: "helloSwiper",
        component: import("../components/07swiper/HelloSwiper")
    },
    {
        path: "/helloEcharts",
        name: "helloEcharts",
        component: import("../components/06echarts/HelloEcharts")
    },
    {
        path: "/myp",
        name: "myp",
        component: import("../components/08life/LifeTest")
    },
    {
        path: "/vue3",
        name: "vue3",
        component: import("../components/09vue3/BaseVue3"),
        children: [
            {
                path: "hello",
                name: "vue3Hello",
                component: import("../components/09vue3/HelloVue3"),
            },
            {
                path: "ref",
                name: "vue3Ref",
                component: import("../components/09vue3/HelloRef"),
            },
            {
                path: "toRef",
                name: "toRef",
                component: import("../components/09vue3/HelloToRef"),
            },
            {
                path: "reactive",
                name: "reactive",
                component: import("../components/09vue3/Reactive"),
            },
            {
                path: "toRefs",
                name: "toRefs",
                component: import("../components/09vue3/ToRefs"),
            },
            {
                path: "method",
                name: "method",
                component: import("../components/09vue3/SetupMethod"),
            },
            {
                path: "getDom",
                name: "getDom",
                component: import("../components/09vue3/GetDom"),
            },
            {
                path: "computed",
                name: "computed",
                component: import("../components/09vue3/Computed"),
            },
            {
                path: "computedSetter",
                name: "computedSetter",
                component: import("../components/09vue3/ComputedSetter"),
            },
            {
                path: "watchEffect",
                name: "WatchEffect",
                component: import("../components/09vue3/WatchEffect"),

            },
            {
                path: "watch",
                name: "watch",
                component: import("../components/09vue3/Watch"),

            }, 
            {
                path: "parent",
                name: "parent",
                component: import("../components/09vue3/Parent"),

            },
            {
                path: "hook",
                name: "hook",
                component: import("../components/09vue3/Hook"),

            },{
                path: "testNodeServer",
                name: "testNodeServer",
                component: import("../components/09vue3/TestNodeServer"),
            },
        ]
    },
    {
        path: "/setup",
        name: "setup",
        component: import("../components/10setup/BaseSetup"),
        children: [
            {
                path: "hello",
                name: "helloSetup",
                component: import("../components/10setup/HelloSetup"),
            },
            {
                path: "parent",
                name: "setupParent",
                component: import("../components/10setup/Parent"),
            },
            {
                path: "store",
                name: "setupStore",
                component: import("../components/10setup/UseState"),
            },
            {
                path: "router",
                name: "setupRouter",
                component: import("../components/10setup/UseRoute"),
            },
        ]
    },
    {
        path: "/elementplus",
        name: "elementplus",
        component: import("../components/10login/ElementPlusBase"),
        children: [
            {
                path: "login",
                name: "elementplusLogin",
                component: import("../components/10login/Login"),
            }
        ]
    },
    // {
    //     path: "/setup3",
    //     name: "setup3",
    //     component: import("../components/09vue3/SetupVue3")
    // },
    {
        path: '/:pathMatch(.*)*',
        redirect: '/'
    }
]

// 创建路由对象
const router = createRouter({
    mode: "hash",
    history: createWebHistory(process.env.BASE_URL),
    routes
})


// 全局路由前置守卫
// to:去往的页面的描述对象
// from：来的页面的描述对象
// next：函数，用于确保去往下个页面（可更改），参数可选，如果传入此参数，必须调用不然页面不跳转
router.beforeEach((to, from, next) => {
    console.log("全局前置to = ", to)
    console.log("全局前置from = ", from)
    if (to.fullPath != "/") {
        let loginUser = localStorage.getItem("loginUser");
        if (!loginUser) {
            // 去往登录页面
            next("/");
            localStorage.setItem("path", to.fullPath);
            return;
        }
    }
    // if (from.path == "/") {
    //     let path = localStorage.getItem("path") || "/welcome";
    //     next(path);
    //     return;
    // }
    next();
})

// 全局路由后置守卫
// to:去往的页面的描述对象
// from：来的页面的描述对象
router.afterEach((to, from) => {
    console.log("全局后置to = ", to)
    console.log("全局后置from = ", from)
})

// 导出路由对象
export default router;